<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p></p>
    <script>
        const pele = document.querySelector('p');

        //数据劫持 需要

        // 原始的数据 和劫持目标 不能是一个 
        // Object.defineProperty(劫持的目标(监控的对象), key, { 配置项 })
        const origin = {name:'乃强'};
        

        // 准备一个劫持目标 监控对象  
        const target = {}
        // 将target 的数据进行渲染  
        Object.defineProperty(target,'name',{
            get(){
                return origin.name
            },
            set(val){
                // 只要你修改target name的值 这个方法立马被执行  
                origin.name = val;
                bindHtml()
            }
        });

        // console.log(target.name);
        // target.name = '东营一哥'

        // console.log(target);
        // console.log(origin);
        bindHtml()
        function bindHtml(){
            pele.innerText = target.name
        }

        target.name = '东营一哥 '


    </script>

</body>
</html>